<template>
	<div class="page">
		<Head navTitle="个人有效交易"/>
		<div class="page-container ">
			<div class="bs-panel ht-panel">
				<div  v-infinite-scroll="load" infinite-scroll-disabled="disabled">
					<!-- v-for="(item,index) in list" :key="index" -->
					<el-table stripe v-infinite-scroll="load" infinite-scroll-disabled="disabled" :data="tableData" style="width: 100%">
						<el-table-column align="center" prop="pid" label="项目/订单号" ></el-table-column>
						<el-table-column align="center" prop="pgen" label="变更">
							<template slot-scope="scope">
								<div class="bgen-box">
									<div class="item">变更时间：2021-09-15 21:22:55</div>
									<div class="item">变更金额：{{scope.row.price}}</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column :width="windowWidth<1000?'100':''" align="center" prop="price" label="金额">
							<template slot-scope="scope">
								<span :class="scope.row.pstatus ?'text-green':'text-red'">{{scope.row.price}}</span>
							</template>
						</el-table-column>
					</el-table>
					<div class="load-more" v-if="loading"><i class="el-icon-loading"></i> 加载中...</div>
					<div class="load-more" v-if="noMore">没有更多了</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				tableData: [{
					pid: '2104260184297342',
					pgen: '2021-09-15 21:22:55',
					price: '32,032.00',
					pstatus: 1
				},{
					pid: '2104260184297342',
					pgen: '2021-09-15 21:22:55',
					price: '-32,032.00',
					pstatus: 0
				},{
					pid: '2104260184297342',
					pgen: '2021-09-15 21:22:55',
					price: '32,032.00',
					pstatus: 1
				},{
					pid: '2104260184297342',
					pgen: '2021-09-15 21:22:55',
					price: '32,032.00',
					pstatus: 1
				},{
					pid: '2104260184297342',
					pgen: '2021-09-15 21:22:55',
					price: '-32,032.00',
					pstatus: 0
				},{
					pid: '2104260184297342',
					pgen: '2021-09-15 21:22:55',
					price: '32,032.00',
					pstatus: 1
				},{
					pid: '2104260184297342',
					pgen: '2021-09-15 21:22:55',
					price: '32,032.00',
					pstatus: 1
				},{
					pid: '2104260184297342',
					pgen: '2021-09-15 21:22:55',
					price: '-32,032.00',
					pstatus: 0
				},{
					pid: '2104260184297342',
					pgen: '2021-09-15 21:22:55',
					price: '32,032.00',
					pstatus: 1
				},],
				count: 4,
				loading: false,
				cellwidth:100,
				windowWidth: document.documentElement.clientWidth
			};
		},
		computed: {
			noMore() {
				return this.count >= 20
			},
			disabled() {
				return this.loading || this.noMore
			},
		},
		mounted() {
			var that = this;
			window.onresize = () => {
				return (() => {
					window.fullWidth = document.documentElement.clientWidth;
					that.windowWidth = window.fullWidth; // 宽
				})()
			};
		},
		methods: {
			load() {
				this.loading = true
				setTimeout(() => {
					for (let i = 0; i < 5; i++) {
						this.tableData.push({
							pid: '2104260184297342',
							pgen: '2021-09-15 21:22:55',
							price: '32,032.00',
							pstatus: 1
						});
					}
					this.loading = false
				}, 1000)
			},
		}
	}
</script>
